@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,400');

html,
body {
    background: #fff none;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.6;
    color: #333;
    letter-spacing: 0;
    font-family: 'Noto Sans JP', Hiragino Sans, 'ヒラギノ角ゴシック',
    Hiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    -webkit-print-color-adjust: exact;
}

*::selection {
    background: rgba(0, 0, 0, 0.2);
}

*::-moz-selection {
    background: rgba(0, 0, 0, 0.2);
}

.fc-red {
    color: #ff0000;
}

span.supText {
    font-size: 75.5%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}

/*============================ #印刷用 ============================*/

@media print {
    #header {
        height: 50px !important;
    }

    .hnav-sublist,
    .header-main,
    .canv-wra,
    #canv {
        display: none !important;
        opacity: 0 !important;
        height: 0px !important;
    }

    .pmain {
        height: 400px !important;
    }

    .print_pages:last-child {
        page-break-after: auto;
    }
}

/*============================ #header ============================*/
#loader-bg,
#loader {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

#loader-bg {
    background: #21348b;
    z-index: 99999;
}

#loader {
    margin: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes ball-scale-multiple {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.ball-scale-multiple {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 60px;
    height: 60px;
}

.ball-scale-multiple > span:nth-child(2) {
    animation-delay: -0.4s;
}

.ball-scale-multiple > span:nth-child(3) {
    animation-delay: -0.2s;
}

.ball-scale-multiple > span {
    background-color: #ffcc00;
    border-radius: 50%;
    animation-fill-mode: both;
    position: absolute;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    animation: ball-scale-multiple 1s 0s linear infinite;
}

.loader__logo {
    width: 100px;
    position: absolute;
    top: 0;
    bottom: -140px;
    right: 0;
    left: 0;
    height: 49px;
    margin: auto;
}

.loader__logo img {
    display: block;
}

/* ---------------------------------------------------------------- wrapper ---- */
@media screen and (min-width: 768px) {
    body {
        background: #eee;
    }

    #wrapper {
        /*min-width: 1300px;*/
        width: 100%;
    }

    #wrapper.touch {
        height: 100%;
    }

    .tel_link {
        pointer-events: none;
    }

    .w1000 {
        width: 1000px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .wm1100 {
        max-width: 1100px;
        min-width: 1000px;
        width: calc(100% - 180px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    .wm1200 {
        max-width: 1200px;
        min-width: 1000px;
        width: calc(100% - 180px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    .wm1300 {
        max-width: 1300px;
        min-width: 1000px;
        width: calc(100% - 180px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    .wm1500 {
        max-width: 1500px;
        min-width: 1000px;
        width: calc(100% - 180px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    #wrapper.touch .wm1100,
    #wrapper.touch .wm1200,
    #wrapper.touch .wm1300,
    #wrapper.touch .wm1500 {
        width: calc(100% - 100px) !important;
    }
}

#wrapper {
    overflow: hidden;
}

/*============================ #particle ============================*/
@media screen and (min-width: 768px) {
    .canv-wrap {
        position: fixed;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: #eee;
    }

    .canv-wrap canvas {
        background-blend-mode: screen;
    }
}

/*============================ #header ============================*/
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}

.header-top {
    width: 100%;
    background-color: #333;
    height: 40px;
}

@media screen and (min-width: 768px) {
    .header-top {
        transition: 0.6s ease;
    }
}

.header-top-in {
    min-width: 1000px;
    display: flex;
    align-items: stretch;
    height: 100%;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

.header-top-txt {
    padding-left: 20px;
    display: flex;
    align-items: center;
    height: 100%;
}

.header-top__ttl {
    font-size: 11px;
    line-height: 1.1;
    color: #c8c8c8;
}

/* ---------------------- option ---- */
.header-top-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-top__chubu {
    width: 118px;
    height: 24px;
    display: block;
    margin: 0 18px;
    background: url(http://www.ctechcorp.co.jp/img/header/ico_chuden.png) center /100% no-repeat;
}

.header-top-search {
    width: 45px;
    height: 100%;
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    transition: 0.6s ease;
    cursor: pointer;
}

.header-top-search--opened {
    background-color: #1a1a1a;
    color: #fff;
}

.hscr .header-btn-item .header-top-search.header-top-search--opened .fa {
    color: #fff;
}

.header-top-search .fa {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    height: 1em;
}

.header-search {
    position: absolute;
    width: 400px;
    right: 0;
    background-color: #1a1a1a;
    z-index: 99999;
    top: 0;
}

.header-search .cse .gsc-control-cse,
.header-search .gsc-control-cse {
    background: none;
    border: none;
}

.header-search .cse form.gsc-search-box,
.header-search form.gsc-search-box {
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
}

.header-search .gsc-clear-button {
    display: none;
}

.header-search #gsc-i-id1 {
    background: #fff;
    width: 100%;
    height: 30px;
    padding: 0 5px 0 10px;
    font-size: 13px;
    line-height: 30px;
    vertical-align: middle;
    border: none;
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
    outline: none;
}

.header-search .gsc-search-button {
    background: #21348b;
    width: 16%;
    height: 30px;
    margin: 0;
    padding: 0 5px 0 0;
    font-size: 13px;
    height: 30px;
    vertical-align: middle;
    color: #ffffff;
    border: none;
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
    cursor: pointer;
    outline: none;
    color: #fff;
}

.header-search .cse table.gsc-search-box td.gsc-input,
.header-search table.gsc-search-box td.gsc-input {
    padding-right: 0;
}

.header-search table.gsc-search-box {
    margin: 0;
    width: 100%;
}

.header-search .gsc-modal-background-image {
    background-color: rgb(0, 20, 40);
}

@media screen and (min-width: 768px) {
    .header-top-search:hover {
        background-color: #21348b;
    }

    .header-search {
        border-bottom-left-radius: 5px;
    }
}

.header-top__contact {
    width: 140px;
    height: 100%;
    background-color: #21348b;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

.header-top__contact::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border: 1px solid #21348b;
    /*transform: scale(1.5);*/
    transition: 0.3s ease;
    opacity: 0;
}

.header-top__contact-in {
    position: relative;
}

.header-top__contact-in::before {
    content: '\f0e0';
    font-family: fontawesome;
    position: relative;
    top: 1px;
    height: 1em;
    line-height: 0;
    font-size: 17px;
    margin-right: 10px;
}

@media screen and (min-width: 768px) {
    .header-top__contact:hover {
        background-color: #fff;
        color: #21348b;
    }

    .header-top__contact:hover::after {
        /*transform: scale(1);*/
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        opacity: 1;
    }
}

/* ---------------------- option ---- */
.header-main {
    position: relative;
    width: 100%;
    height: 80px;
    transition: 0.6s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 9999;
}

@media screen and (min-width: 768px) {
    .header-main-in,
    .header-logo,
    .hnav,
    .hnav-list,
    .hnav-item,
    .hnav__link {
        display: flex;
        height: 100%;
    }
}

.header-main-in {
    align-items: stretch;
    justify-content: flex-end;
    min-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.header-logo {
    align-items: center;
    justify-content: center;
    margin-right: auto;
    padding-left: 30px;
}

.header__link {
    width: 100px;
    height: 50px;
    display: block;
    transition: 0.6s ease;
    position: relative;
}

.header__link::before,
.header__link::after {
    content: '';
    width: 130px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transition: 0.6s ease;
}

.header__link::after {
    opacity: 0;
}

.header__link::before {
    z-index: 2;
    background: url(./logo.png) center /100% no-repeat;
}

.hscr-open .header__link::before {
    background: url(./logo3.png) center /100% no-repeat!important;
}

.header__link::after {
    /*background: url(./logo2.png) center /100% no-repeat;*/

    /*background: url(http://www.ctechcorp.co.jp/img/header/logo_clr.png) center /100% no-repeat;*/
}

.hnav {
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hnav-list {
    align-items: center;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #fff;
    line-height: 1.2;
    transition: 0.6s ease;
    width: 100%;
    justify-content: flex-end;
    position: relative;
    right: 0;
    font-weight: bold;
}

.hnav-item {
    align-items: center;
    position: relative;
}

@media screen and (min-width: 768px) {
    .hnav-item {
        cursor: pointer;
    }
}

.hnav__link {
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    position: relative;
}

.hnav__link-in {
    position: relative;
}

.hnav__link-in::before {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -32px;
    right: 0;
    left: 0;
    margin: auto;
    background-color: #fff;
    transform-origin: 0 0;
    transition: 0.3s ease;
    transform: scaleX(0);
}

.hnav-item:nth-child(n + 1):nth-child(-n + 5)::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* ---------------------- option ---- */
@media screen and (min-width: 768px) {
    .hnav__item--current .hnav__link-in::before,
    .hnav__link:hover .hnav__link-in::before {
        transform: scaleX(1);
    }

    .hscr-open .header-main,
    .hscr .header-main:hover {
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(85, 85, 85, 0.08);
    }

    .header__link::after {
        opacity: 0;
    }
}

/* ---------------------- option ---- */
.menu-btn {
    position: relative;
    width: 100px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.menu-btn button {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.btn-menu-txt {
    color: #fff;
    line-height: 1em;
    position: relative;
    font-size: 12px;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-top: 5px;
    padding-left: 0.05em;
    transition: 0.3s ease;
}

.btn-open span,
.btn-close span {
    background-color: #fff;
    display: block;
    width: 30px;
    height: 3px;
    margin: 3px;
    transition: 0.3s ease;
}

.btn-open span:nth-of-type(1) {
    top: 11px;
}

.btn-open span:nth-of-type(2) {
    top: 18.5px;
}

.btn-open span:nth-of-type(3) {
    top: 27px;
}

/* ---------------------- スクロールした時のアニメーション ---- */
.hscr .header-main {
    top: 0;
    position: fixed;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

@media screen and (min-width: 768px) {
    .hnav--open .hnav-list {
        opacity: 0;
        right: -80px;
        transition: 0.6s ease;
    }

    .hscr .hnav-list {
        opacity: 0;
        visibility: hidden;
        right: -80px;
        color: #333;
        transition: 0.6s ease;
    }

    .hscr .menu-btn {
        border: 1px solid rgba(255, 255, 255, 0);
    }

    /* ---------------------- option ---- */
    .hscr .btn-close span:nth-of-type(1),
    .hscr .btn-close span:nth-of-type(2),
    .hscr .btn-close span:nth-of-type(3) {
        transform: none;
    }
}

/* ---------------------- 色変え ---- */
.hscr .btn-open span,
.hscr .btn-close span,
.hscr .hnav__link-in::before {
    background-color: #f6ab00;
}

.hscr .btn-menu-txt {
    color: #f6ab00;
}

.hscr .header__link::before {
    opacity: 0;
}
.hscr-open .header__link::before {
    opacity: 1;
}

.hscr .header__link::after {
    opacity: 1;
}

/* ---------------------- option ---- */

/* ---------------------------------------------------------------- animation ---- */
@media screen and (min-width: 768px) {
    .hscr .btn-click.btn-close {
        border-left: 1px solid #ccc;
        background-color: #fff;
    }

    .hscr .menu-btn {
        border: none;
    }

    .hscr .hnav-item:nth-child(n + 1):nth-child(-n + 5)::after {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

.btn-close span:nth-of-type(1),
.hscr .btn-click.btn-close span:nth-of-type(1) {
    transform: translateY(8px) rotate(45deg);
}

.btn-close span:nth-of-type(2),
.hscr .btn-click.btn-close span:nth-of-type(2) {
    transform: scale(0);
}

.btn-close span:nth-of-type(3),
.hscr .btn-click.btn-close span:nth-of-type(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.btn-click {
}

/* ---------------------- option ---- */
.hscr .hnav--open .hnav-list {
    opacity: 1;
    transition: 0.6s ease;
    right: 0;
    visibility: visible;
}

/*============================ #メガドロップ ============================*/
@media screen and (min-width: 768px) {
    .hnav-sublist {
        position: fixed;
        width: 100%;
        left: 0px;
        top: 80px;
        background: #f5f5f5;
        color: #1a1a1a;
        visibility: hidden;
        transition: all 0.1s ease;
        opacity: 0;
        transform-origin: 0px 0px;
        z-index: 0;
        min-width: 1000px;
        font-weight: normal;
        pointer-events: none;
        /*box-shadow: 0 100vh 0 100vh rgba(0, 20, 40, 0.6);*/
    }

    .hscr .hnav-sublist {
        top: 80px;
    }

    .hnav__sub:hover .hnav-sublist {
        visibility: visible;
        opacity: 1;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .hscr-open .hnav__sub:hover .hnav-sublist,
    #header:not(.hscr) .hnav__sub:hover .hnav-sublist {
        visibility: visible;
        pointer-events: auto;
        cursor: default;
    }

    /*============================ #nakami ============================*/
    .sub-nav {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /*.hnav-sublist--01 .sub-nav {
		min-height: 350px;
	}*/
    .sub-nav-cnt {
        width: 20%;
        background-color: #e5e5e5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .sub-nav-cnt-in {
        padding: 30px 25px;
        width: 100%;
    }

    .sub-nav-in {
        width: 80%;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 30px 30px 10px;
    }

    .hnav-sublist--01 .sub-nav-in,
    .hnav-sublist--03 .sub-nav-in {
        padding: 15px 20px 5px;
    }

    .sub-nav__ttl {
        font-size: 24px;
        line-height: 1;
        letter-spacing: 0.2em;
        font-weight: bold;
        text-align: right;
        text-indent: 0.2em;
        /*padding-bottom: 10px;*/
        margin-bottom: 35px;
    }

    .sub-nav__ttl-sub {
        color: #21348b;
        letter-spacing: 0.15em;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 500;
        display: block;
        margin: 12px 0 20px;
        padding-right: 0.25em;
    }

    .sub-nav-cnt .linkbtn {
        width: 100%;
        max-width: 250px;
        margin-left: auto;
        background-color: #21348b;
        color: #fff;
    }

    .sub-nav-img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /*.hnav-sublist--03 .sub-nav-img {
		height: 370px;
	}*/
    /* ---------------------- option ---- */
    .sub-nav-item {
        width: calc((100% - 40px) / 3);
        margin-bottom: 20px;
    }

    .sub-nav-item:not(:nth-child(3n)) {
        margin-right: 19px;
    }

    .sub-nav-item__ttl {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #c9c9c9;
        padding-bottom: 8px;
        color: #21348b;
    }

    .sub-nav-item__ttl::before {
        content: '\f0a9';
        font-family: fontawesome;
        position: relative;
        color: #1d5aa7;
        margin-right: 10px;
        display: inline-block;
        left: 0;
        transition: 0.3s ease;
    }

    .sub-nav-item__link:hover {
        text-decoration: underline;
    }

    .sub-nav-item__txt:not(:last-child) {
        margin-bottom: 5px;
    }

    .sub-nav-item__txt::before {
        content: '';
        width: 5px;
        height: 2px;
        position: absolute;
        background-color: #21348b;
        display: block;
        top: 6px;
        left: 0;
        margin: 0 auto;
    }

    .sub-nav-item__txt .pdf-link::after {
        content: '\f1c1';
        font-family: fontawesome;
        position: relative;
        display: inline-block;
        margin-left: 5px;
        color: #f00;
    }

    .sub-nav-hdnbox {
        margin: 8px 0 0;
    }

    @media screen and (min-width: 1400px) {
        .sub-nav-cnt {
            width: 25%;
        }

        .sub-nav-cnt-in {
            padding: 40px 35px;
        }

        .sub-nav-in {
            width: 75%;
            padding-bottom: 0;
        }

        .hnav-sublist--01 .sub-nav-in,
        .hnav-sublist--03 .sub-nav-in {
            padding: 30px 40px 10px;
        }

        .sub-nav-item {
            width: calc((100% - 60px) / 3);
            max-width: 380px;
            margin-bottom: 25px;
        }

        .sub-nav-item:not(:nth-child(3n)) {
            margin-right: 29px;
        }

        .sub-nav-item__ttl {
            font-size: 15px;
            padding-bottom: 10px;
        }

        .sub-nav-item__txt {
            font-size: 13px;
            line-height: 1.5;
            padding-left: 15px;
        }

        .sub-nav-item__txt:not(:last-child) {
            margin-bottom: 5px;
        }

        .sub-nav-item__txt::before {
            width: 10px;
            height: 3px;
            top: 9px;
        }

        .sub-nav-hdnbox {
            margin-top: 10px;
        }
    }
    /*============================ #compnay ============================*/
    [class*='sub-nav-item--'] .sub-nav-item__link {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .sub-nav-item__img {
        width: 100%;
        height: 11vw;
        max-height: 180px;
        min-height: 130px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
    }

    .sub-nav-item__img::after {
        content: '';
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        border: 1px solid #21348b;
        transform: scale(1.3);
        transition: 0.3s ease;
        bottom: 0;
        right: 0;
        opacity: 0;
        z-index: 3;
    }

    /*.sub-nav-item__img::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0);
		z-index: 2;
		transition: 0.5s ease;
	}*/
    [class*='sub-nav-item--'] .sub-nav-item__ttl {
        border-bottom: none;
    }

    /* ---------------------- option ---- */
    /*.sub-nav-item__link:hover .sub-nav-item__img::before {
		background-color: rgba(0, 0, 0, 0.5);
	}*/
    .sub-nav-item__link:hover .sub-nav-item__ttl::before,
    .sub-nav-item__ttl:hover::before {
        left: 5px;
    }

    .sub-nav-item__link:hover .sub-nav-item__img::after {
        transform: scale(1);
        opacity: 1;
    }
}

/*============================ #main ============================*/
#main {
    display: block;
    margin-top: 40px;
}

/*============================ #下層メイン部分 ============================*/
.pmain {
    position: relative;
}

.pmain-slide {
    width: 100%;
    height: 500px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .pmain-slide {
        min-height: 500px;
        max-height: 600px;
        height: 40vw;
    }
}

.pmain-slide::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    /*background-color: rgba(0, 35, 80, 0.6);*/
    background: rgba(0, 35, 80, 1);
    opacity: 0.6;
    background-size: 2px;
    z-index: 2;
}

[class*='pmain-slide-item'] {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media screen and (min-width: 768px) {
    [class*='pmain-slide-item'] {
        min-height: 500px;
        max-height: 600px;
        height: 40vw;
    }
}

/* ---------------------- 下層でメイン画像のやつ ---- */
.pmain-bgimg {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

@media screen and (min-width: 768px) {
    .pmain-bgimg {
        min-height: 400px;
        max-height: 500px;
        height: 35vw;
    }
}

.pmain-bgimg::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 35, 80, 1);
    opacity: 0.6;
    background-size: 2px;
    z-index: 2;
}

/*============================ #breadcrumb ============================*/
.breadcrumb {
    position: absolute;
    top: 80px;
    left: 0;
    min-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    z-index: 5;
}

@media screen and (min-width: 768px) {
    .breadcrumb {
        min-width: 1000px;
    }
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 15px 30px;
}

.breadcrumb-list__item {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 5px;
}

.breadcrumb-list__item:not(:last-child)::after {
    content: '>';
    display: inline-block;
    margin: 0 10px;
    line-height: 1;
    height: 1em;
    position: relative;
}

.breadcrumb__link {
    position: relative;
    transition: 0.3s ease;
    overflow: hidden;
}

.breadcrumb__link::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: -4px;
    right: 0;
    transition: 0.3s ease;
}

/* ---------------------- option ---- */
.breadcrumb__link:hover {
    color: #ffcc00;
}

.breadcrumb__link:hover::after {
    width: 0;
}

/*============================ # ============================*/
.pmain-in {
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    font-weight: 500;
}

.pmain__sub {
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.pmain-ttl {
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.pmain-ttl__sub {
    font-size: 13px;
    letter-spacing: 0.15em;
    line-height: 1.3;
    color: #ffcc00;
    display: block;
    margin: 25px 0 40px;
    display: none;
}

.pmain-txt {
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin-top: 30px;
}

/* ---------------------- option ---- */
.pmain-bline::after {
    content: '';
    width: 2px;
    height: 100px;
    background-color: #21348b;
    position: absolute;
    bottom: 40px;
    right: 0;
    left: 0;
    margin: auto;
    display: block;
    z-index: 4;
}

/*============================ #下層のナビゲーション ============================*/
.cntnav {
    position: relative;
    /*background-color: #eee;*/
    z-index: 4;
}

.cntnav-in {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    z-index: 4;
}

@media screen and (min-width: 768px) {
    .cntnav-in {
        max-width: 1300px;
        min-width: 1000px;
        width: calc(100% - 180px);
    }

    #wrapper.touch .cntnav-in {
        width: calc(100% - 100px);
    }
}

[class*='cntnav-item--'] {
    width: calc((100% - 1px) / 3);
    background-color: #fff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    position: relative;
}

.cntnav-item--01 {
    z-index: 9;
}

.cntnav-item--02 {
    z-index: 8;
}

.cntnav-item--03 {
    z-index: 7;
}

.cntnav-item--04 {
    z-index: 6;
}

.cntnav-item--05 {
    z-index: 5;
}

.cntnav-item--06 {
    z-index: 4;
}

.cntnav-item--07 {
    z-index: 3;
}

.cntnav-item--08 {
    z-index: 2;
}

.cntnav-item--09 {
    z-index: 1;
}

.cntnav-img {
    width: 100%;
    height: 200px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cntnav-box {
    padding: 18px 30px;
}

.cntnav__ttl {
    color: #21348b;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    font-weight: bold;
    border-bottom: 2px solid #c9c9c9;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cntnav__ttl::before {
    content: '\f0a9';
    font-family: fontawesome;
    position: relative;
    color: #1d5aa7;
    margin-right: 10px;
    transition: 0.3s ease;
    left: 0;
    display: inline-block;
}

.cntnav__ttl.pdf-link::before {
    content: '\f1c1';
    color: #f00;
}

.cntnav__ttl.blank-link::before {
    content: '\f08e';
}

.cntnav-list {
    font-size: 13px;
    line-height: 1.6;
}

.cntnav-item {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.cntnav-item::before {
    content: '';
    width: 10px;
    height: 3px;
    position: absolute;
    background-color: #21348b;
    display: block;
    top: 0.65em;
    left: 0;
}

.cntnav__link.pdf-link::after {
    content: '\f1c1';
    font-family: fontawesome;
    position: relative;
    display: inline-block;
    margin-left: 5px;
    color: #f00;
}

/* ---------------------- option ---- */

@media screen and (min-width: 768px) {
    .cntnav__link:hover {
        text-decoration: underline;
    }
}

/* ---------------------- option ---- */
.cntnav-wrp .cntnav-in {
    transform: translateY(-75px);
}

/* ---------------------- option ---- */
.cntnav--corp .cntnav__ttl {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 5px;
}

.localnav__txt {
    font-size: 14px;
    line-height: 1.6;
}

/*============================ #背景に画像があるブロック ============================*/
.bgrole-wrp {
    margin-bottom: 60px;
}

.bgblock__box {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

@media screen and (min-width: 768px) {
    .bgblock__box {
        height: auto;
        padding-top: calc(3vw + 30px);
        padding-bottom: calc(3vw + 30px);
    }
}

.bgblock__box::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 35, 80, 1);
    opacity: 0.6;
    background-size: 2px;
    z-index: 2;
}

.bgblock__box-in {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .bgblock__box-in {
        width: calc(100% - 150px);
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }
}

.bgblock__box-subttl {
    background-color: #fff;
    border-radius: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: #21348b;
    font-weight: 500;
    margin-bottom: 30px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .bgblock__box-subttl {
        min-width: 300px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.bgblock__box-txt {
    display: contents;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
    width: 800px;
    margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
    .bgblock__box-txt:last-child {
        margin-bottom: 0;
    }
}

.bgblock__box-in .block__ttl {
    margin-bottom: 40px;
}

/* ---------------------- 中に画像がある場合 ---- */
.bgblock__box-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 970px;
}

.bgblock__box-img {
    width: 300px;
    height: 100%;
}

.bgblock__box-img-detail {
    width: 100%;
    display: block;
}

@media screen and (min-width: 768px) {
    .bgblock__box-inline {
        width: calc(100% - 180px);
        max-width: 1100px;
        min-width: 1000px;
    }

    #wrapper.touch .bgblock__box-inline {
        width: calc(100% - 100px);
    }

    .bgblock__box-inline .bgblock__box-txt {
        width: calc(100% - 335px);
    }
}

/* ---------------------- アイコン付き ---- */
.bgblock__box-ico {
    display: block;
    width: 170px;
    margin: 0 auto 45px;
    height: 100%;
}

.bgblock__box-ico-detail {
    width: 100%;
    display: block;
}

/* ---------------------- 青い三角の幾何学模様のパターン ---- */
.bgrole-wrp--bltri {
}

.bgrole-wrp--bltri .bgblock__box::before {
    background: url(http://www.ctechcorp.co.jp/img/cnt/bg_ptn.jpg) center /cover fixed;
    opacity: 1;
}

.bgrole-wrp--bltri .bgblock__box-txt {
    margin-bottom: 20px;
}

/*============================ #テーブル ============================*/
.block__tbl {
    width: 100%;
    font-size: 14px;
    line-height: 2;
    border-right: 5px solid #21348b;
}

.block__tbl-item {
    border-bottom: 1px solid #c9c9c9;
}

.block__tbl-item:first-child {
    border-top: 1px solid #c9c9c9;
}

.block__tbl-ttl,
.block__tbl-txt {
    padding: 5px 15px;
    width: 50%;
}

.block__tbl-ttl {
}

.block__tbl-txt {
}

/* ---------------------- option ---- */
.block__tbl--bgbl {
    background-color: #21348b;
    color: #fff;
}

.block__tbl--bggray {
    background-color: #ebeced;
}

.block__tbl--bgwh {
    background-color: #fff;
    color: #21348b;
}

/* ---------------------- 左が短くて右が長い ---- */
.block__tbl--long {
}

.block__tbl--long .block__tbl-ttl {
    width: 240px;
}

.block__tbl--long .block__tbl-txt {
    width: calc(100% - 200px);
}

/*============================ #localnav ============================*/
.localnav-wrp .cntnav {
    padding: 0 0 80px;
}

/* ---------------------- option ---- */
.localnav-wrp--corp,
.localnav-wrp {
    margin-bottom: 70px;
}

.plocalbox-wrp .localnav-wrp {
    margin-bottom: 0px;
    padding-bottom: 0;
}

.localnav-wrp--corp .cntnav {
    padding: 0 0 80px;
}

@media screen and (min-width: 768px) {
    .localnav-wrp .cntnav-in,
    .localnav-wrp--corp .cntnav-in {
        padding-top: 80px;
        border-top: 3px solid #21348b;
    }
}

/* ---------------------- 第三下層 ---- */
.biz-box-nav-wrp .btn-wrp,
.biz-box-nav-wrp .block__ttl02 {
    display: none;
}

.biz-box-nav-wrp .biz-box-nav {
    margin-bottom: 0;
}

.localnav-wrp .biz-box-cnt {
    padding: 15px 20px;
}

.plocalbox-wrp .biz-box__img {
    height: 150px;
}

.plocalbox-wrp .biz-box-cnt .cntnav__ttl {
    margin-bottom: 0;
}

.plocalbox-wrp .biz-box__txt {
    display: none;
}

/*============================ #見出しのやつ ============================*/
.block__ttl {
    color: #fff;
    font-size: 30px;
    letter-spacing: 0.05em;
    line-height: 1.67;
}

/* ---------------------- option ---- */
.block__ttl--bl {
    color: #21348b;
}

/* ---------------------- option ---- */
.block__ttl--m {
    font-size: 26px;
}

/* ---------------------- option ---- */
.block__ttl02-wrp {
    position: relative;
    z-index: 2;
}

.block__ttl02 {
    color: #f6ab00;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    font-weight: 600;
    margin: 13px 0 35px;
}

.block__ttl02-sub {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #333;
    font-weight: 500;
    margin: 15px 0 0;
}

/* ---------------------- option ---- */
.block__ttl03 {
    font-size: 22px;
    position: relative;
    color: #21348b;
    letter-spacing: 0.05em;
    line-height: 1.77;
    font-weight: bold;
    border-top: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    padding: 15px 15px 15px 40px;
    margin-bottom: 20px;
}

.block__ttl03::before {
    content: '';
    width: 26px;
    height: 10px;
    background: url(http://www.ctechcorp.co.jp/img/cnt/ico_ttl.png) center /100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/* ---------------------- option ---- */
.block__ttl04 {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    color: #21348b;
    line-height: 1.4;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.block__ttl04::before {
    content: '';
    width: 20px;
    height: 1px;
    background-color: #21348b;
    position: relative;
    margin-right: 10px;
}

/* ---------------------- 下に青い線 ---- */
.block__ttl05 {
    font-size: 24px;
    letter-spacing: 0.1em;
    font-size: 1.3;
    color: #21348b;
    font-weight: 600;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.block__ttl05::after {
    content: '';
    width: 40px;
    height: 4px;
    background-color: #21348b;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

/* ---------------------- 青ベタ白字 ---- */
.block__ttl06 {
    width: 100%;
    background-color: #21348b;
    text-align: center;
    line-height: 1.4;
    color: #fff;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 15px;
    margin-bottom: 15px;
}

/*============================ #ボタンのやつ ============================*/
.btn-wrp {
    display: flex;
    align-items: center;
    justify-content: center;
}

.linkbtn {
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #21348b;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: 0.3s ease;
    position: relative;
    background-color: #fff;
}

.linkbtn::before {
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #21348b;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 0;
    transition: 0.3s ease;
}

.linkbtn-in {
    position: relative;
}

.linkbtn:not(:last-child) {
    margin-right: 30px;
}

/* ---------------------- option ---- */
.linkbtn.linkbtn--gr {
    color: #fff;
    background-color: #21348b;
}

.linkbtn.linkbtn--gr::before {
    border: 1px solid #c8c8c8;
}

/* ---------------------- option ---- */
.linkbtn.linkbtn--bk {
    color: #333;
    background-color: #fff;
}

.linkbtn.linkbtn--bk::before {
    border: 1px solid #c8c8c8;
}

@media screen and (min-width: 768px) {
    .linkbtn:hover {
        /*color: #fff;*/
        /*background-color: #fff;*/
        /*border: 1px solid #21348b;*/
    }

    .linkbtn:hover::before {
        width: 95%;
        height: 75%;
        opacity: 1;
    }

    .linkbtn--bk:hover,
    .linkbtn--gr:hover {
        color: #fff;
    }
}

/*============================ #header ============================*/
.linkbtn02 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #21348b;
    color: #fff;
    width: 100%;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    border-radius: 25px;
    padding: 10px 20px;
    position: relative;
    border: 3px solid #21348b;
    transition: 0.5s ease;
}

.linkbtn02::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    transition: 0.5s ease;
}

.linkbtn02-in {
    position: relative;
    z-index: 2;
}

.linkbtn02--arw::before,
.linkbtn02--pdf::before {
    font-family: fontawesome;
    height: 1em;
    line-height: 1;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 21px;
    color: #21348b;
    z-index: 2;
    margin: auto;
    transition: 0.5s ease;
}

.linkbtn02--arw::before {
    content: '\f054';
}

.linkbtn02--pdf::before {
    content: '\f1c1';
}

@media screen and (min-width: 768px) {
    .linkbtn02:hover {
        background-color: #fff;
        color: #21348b;
    }

    .linkbtn02.linkbtn02--arw:hover::before {
        right: 15px;
    }
}

/*============================ #白背景に左上にロゴ ============================*/
.biz-box {
    padding-bottom: 60px;
    position: relative;
    z-index: 2;
}

.biz-box-in {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    position: relative;
    padding: 45px 0 80px;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
}

/*@media screen and (min-width: 768px) {
	.biz-box-in {
		max-width: 1300px;
		min-width: 1000px;
		width: calc(100% - 200px);
	}
}*/

.biz-box-in::before {
    content: '';
    width: 150px;
    height: 50px;
    background: url(http://www.ctechcorp.co.jp/img/cnt/logo.png) center /100% no-repeat;
    position: absolute;
    top: 30px;
    left: 30px;
}

.biz-box .block__ttl {
    margin-bottom: 15px;
}

.biz-box__leadtxt {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 60px;
    padding-left: 50px;
    padding-right: 50px;
}

.biz-box__leadtxt.biz-box-entry,
.biz-box-entry .biz-box__leadtxt {
    padding-left: 0;
    padding-right: 0;
}

.biz-box__leadtxt--alert {
    color: #ff0000;
}

/* ---------------------- option ---- */
.biz-box-nav {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
    .biz-box-nav {
        max-width: 1100px;
        width: calc(100% - 100px);
    }
}

[class*='biz-box-item--'] {
    width: calc((100% - 1px) / 3);
    position: relative;
    z-index: 4;
    overflow: hidden;
    border-left: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
}

@media screen and (min-width: 768px) {
    [class*='biz-box-item--']:nth-child(3n),
    [class*='biz-box-item--']:last-child {
        border-right: 1px solid #c8c8c8;
    }
}

.biz-box-item--current {
    pointer-events: none;
}

.biz-box-item--current::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(31, 90, 178, 0.6);
    z-index: 3;
}

.biz-box-item--current::after {
    content: '\f00c';
    display: inline-block;
    font-family: FontAwesome;
    font-size: 30px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 4;
}

.biz-box-item--current .biz-box__link {
    filter: grayscale(100%) contrast(110%);
}

.biz-box__link {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
}

.biz-box__img {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.biz-box__img::after {
    content: '';
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    border: 1px solid #21348b;
    transform: scale(1.3);
    transition: 0.3s ease;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 3;
}

.biz-box-cnt {
    padding: 15px 20px 25px;
}

.biz-box-cnt .cntnav__ttl {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 5px;
}

.biz-box__txt {
    font-size: 13px;
    line-height: 1.67;
}

/* ---------------------- option ---- */
.biz-box--lead {
}

.biz-box--lead .biz-box-in {
    top: -80px;
    margin-bottom: -80px;
    padding: 60px 0 80px;
}

/* ---------------------- hover_animation ---- */
@media screen and (min-width: 768px) {
    .biz-box__link:hover .biz-box__img::after {
        transform: scale(1);
        opacity: 1;
    }

    .biz-box__link:hover .biz-box-cnt .cntnav__ttl {
        text-decoration: underline;
    }

    .biz-box__link:hover .cntnav__ttl::before {
        left: 5px;
    }
}

/* ---------------------- 電力設備事業 ---- */
/*.biz-box-nav--facility .biz-box-item--01 .biz-box__img::before {
	background-image: url(http://www.ctechcorp.co.jp/img/localnav/business/facility/img_01.jpg);
}
.biz-box-nav--facility .biz-box-item--02 .biz-box__img::before {
	background-image: url(http://www.ctechcorp.co.jp/img/localnav/business/facility/img_02.jpg);
}
.biz-box-nav--facility .biz-box-item--03 .biz-box__img::before {
	background-image: url(http://www.ctechcorp.co.jp/img/localnav/business/facility/img_03.jpg);
}
.biz-box-nav--facility .biz-box-item--04 .biz-box__img::before {
	background-image: url(http://www.ctechcorp.co.jp/img/localnav/business/facility/img_04.jpg);
}*/
/*============================ #事例一覧 ============================*/
.biz-box-entry {
}

@media screen and (min-width: 768px) {
    .biz-box-entry {
        width: calc(100% - 120px) !important;
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }
}

.biz-box-entry__lead {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.05em;
    margin-bottom: 45px;
}

.biz-example-item {
    background-color: #f0f0f0;
    position: relative;
}

.biz-example-item:not(:last-child) {
    margin-bottom: 25px;
}

.biz-example__ico {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #21348b;
    color: #fff;
    padding: 7px 17px;
    display: block;
    line-height: 1.1;
    font-size: 15px;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.biz-example-in {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 60px 40px 40px;
}

.biz-example-img {
    width: 300px;
}

.biz-example-txt {
    width: calc(100% - 300px);
    padding-left: 35px;
}

.biz-example__ttl {
    font-size: 20px;
    line-height: 2;
    color: #21348b;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    font-weight: 600;
}

.biz-example__txt {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.05em;
}

/*============================ #ピックアップ ============================*/
.pickup {
    width: 100%;
    background-color: #eeeff0;
    padding: 60px 0 70px;
}

.pickup-slider {
    width: 970px;
    margin-left: auto;
    margin-right: auto;
}

[class*='pickup-item'] {
    width: 295px;
    height: 300px;
    background-color: #fff;
    margin: 12px;
    position: relative;
    box-shadow: 0 4px 8px rgba(85, 85, 85, 0.08);
    overflow: hidden;
}

.pickup__link {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}

.pickup-img {
    width: 100%;
    height: 170px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}

.pickup-img::after {
    content: '';
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    border: 1px solid #21348b;
    transform: scale(1.3);
    transition: 0.3s ease;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 3;
}

.pickup-cat {
    background-color: #ffd800;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: white;
    line-height: 1.2;
    position: absolute;
    right: 0;
    top: 0;
    padding: 6px 15px;
    z-index: 4;
}

.pickup-in {
    padding: 15px 20px;
}

.pickup__ttl {
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #f6ab00;
}

.pickup__ttl::before {
    content: '\f0a9';
    font-family: fontawesome;
    position: relative;
    color: #f6ab00;
    margin-right: 5px;
    display: inline-block;
    transition: 0.3s ease;
    left: 0;
}

.pickup-txt {
    font-size: 13px;
    line-height: 1.76;
}

.pickup .slick-arrow {
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 22px;
    text-align: center;
    line-height: 1;
    transition: 0.3s ease;
}

.pickup .slick-prev {
    left: -70px;
}

.pickup .slick-next {
    right: -70px;
}

@media screen and (min-width: 768px) {
    .pickup .slick-arrow:hover {
        background-color: #21348b;
    }
}

/* ---------------------- option ---- */
@media screen and (min-width: 768px) {
    .pickup__link:hover .pickup__ttl {
        text-decoration: underline;
    }

    .pickup__link:hover .pickup__ttl::before {
        left: 5px;
    }

    .pickup__link:hover .pickup-img::after {
        transform: scale(1);
        opacity: 1;
    }
}

/*============================ #数字付きリスト ============================*/
.num-list {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 10px;
}

.num-list--gray {
    background-color: #eee;
    padding: 20px 20px;
}

.num-item:not(:last-child) {
    margin-bottom: 20px;
}

.num-item-in {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.num-item__num {
    width: 36px;
    height: 36px;
    background-color: #21348b;
    border-radius: 50%;
    color: #ffcc00;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 15px;
}

.num-item__ttl {
    font-size: 18px;
    font-weight: bold;
    color: #21348b;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.num-item__txt {
    font-size: 14px;
    line-height: 1.7;
    padding-left: 51px;
    padding-top: 5px;
}

/* ---------------------- タイトルが無いとき ---- */
.num-list--txtonly .num-item-in {
    align-items: flex-start;
}

.num-list--txtonly .num-item__txt {
    padding-left: 0;
    padding-top: 0;
    width: calc(100% - 20px);
}

/*============================ #関連技術情報 ============================*/
.techinfo {
    /*padding-bottom: 0;*/
}

.techinfo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 auto 20px;
}

.techinfo-list .btn-wrp {
    display: none;
}

.localnav-wrp .techinfo-list .btn-wrp {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .techinfo-list {
        max-width: 1100px;
        width: calc(100% - 100px);
    }

    .techinfo-item-img {
        min-height: 95px;
    }
}

[class*='techinfo-item--'] {
    width: calc((100% - 20px) / 2);
    background-color: #f0f0f0;
    margin-bottom: 20px;
    position: relative;
}

.techinfo__link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.techinfo-item-img {
    width: 30%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.techinfo-item-txt {
    width: 70%;
    padding: 20px 30px 20px 20px;
    position: relative;
}

.techinfo-item-txt::after {
    content: '\f105';
    font-family: fontawesome;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    color: #b6b6b6;
    font-size: 30px;
    line-height: 1;
    height: 1em;
}

.pdf-link .techinfo-item-txt::after {
    content: '\f1c1';
    color: #f00;
    font-size: 16px;
}

.techinfo-ico {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

[class*='techinfo-ico-item--'] {
    height: 21px;
    border-radius: 10.5px;
    line-height: 21px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 0 17px;
    margin-bottom: 10px;
}

[class*='techinfo-ico-item--']:not(:last-child) {
    margin-right: 10px;
}

.techinfo-ico-item--bl {
    background-color: #21348b;
}

.techinfo-ico-item--yw {
    background-color: #ffcc00;
    color: #21348b;
}

.techinfo-ico-item--gry {
    color: #fff;
    background-color: #7d7d7d;
    padding-left: 25px;
}

.techinfo__ttl {
    color: #21348b;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.techinfo__txt {
    font-size: 12px;
    line-height: 1.58;
}

.techinfo .techinfo__txt {
    display: none;
}

/* ---------------------- option ---- */
@media screen and (min-width: 768px) {
    .techinfo-item-img::after {
        content: '';
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        border: 1px solid #21348b;
        transform: scale(1.3);
        transition: 0.3s ease;
        bottom: 0;
        right: 0;
        opacity: 0;
        z-index: 3;
    }

    .techinfo__link:hover .techinfo__ttl {
        text-decoration: underline;
    }

    .techinfo__link:hover .techinfo-item-img::after {
        transform: scale(1);
        opacity: 1;
    }

    .techinfo__link:hover .techinfo-item-txt::after {
        color: #21348b;
    }
}

.localnav-wrp .techinfo__txt {
    display: none;
}

/*============================ #新着情報 ============================*/
.news-box {
    margin: 50px auto 0;
    padding-bottom: 0;
}

.news-list {
    margin: 0 auto 25px;
}

@media screen and (min-width: 768px) {
    .news-list {
        max-width: 1100px;
        width: calc(100% - 180px);
    }

    #wrapper.touch .news-list {
        width: calc(100% - 100px);
    }
}

.news-item {
    padding-bottom: 20px;
}

.news-item:not(:last-child) {
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
}

.news-item__link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.news-item__days {
    font-size: 13px;
    width: 130px;
}

[class*='news-item__cat--'] {
    width: 100px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    background-color: #1530ac;
    color: #fff;
    margin: 0 15px 0 0;
}

/* ---------------------- option ---- */
.news-item__cat--news {
    background-color: #434343;
}

.news-item__cat--notice {
    background-color: #1530ac;
}

/* ---------------------- option ---- */
.news-item__ttl {
    width: calc(100% - 245px);
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: 0.3s ease;
}

@media screen and (min-width: 768px) {
    .news-item__link:hover .news-item__ttl {
        transform: translateX(5px);
        color: #21348b;
    }
}

/*============================ #再生エネルギー/モーダル ============================*/
.renew_modal {
    position: relative;
    background-color: #fff;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    width: calc(100% - 100px);
}

.renew_modal-in {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.renew_modal-img {
    width: 40%;
    /*height: 100%;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.renew_modal-img span {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 15px;
    display: inline-block;
    color: #fff;
    text-shadow: 0px 0px 3px #000000;
    font-weight: bold;
}

.renew_modal-txt {
    width: 60%;
    padding: 30px 35px;
}

.renew_modal__ttl {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #21348b;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}

[class*='renew_modal__ico--'] {
    content: '';
    width: 50px;
    height: 50px;
    position: relative;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 15px;
}

.renew_modal__ico--wind {
    background-image: url(http://www.ctechcorp.co.jp/img/renew/ico_wind.png);
}

.renew_modal__ico--solar {
    background-image: url(http://www.ctechcorp.co.jp/img/renew/ico_solar.png);
}

.renew_modal__ico--hydro {
    background-image: url(http://www.ctechcorp.co.jp/img/renew/ico_hydro.png);
}

.renew_modal__ttl-in {
    width: calc(100% - 40px);
}

.renew_modal-tbl {
    width: 100%;
    border-top: 1px solid #c9c9c9;
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
}

.renew_modal-tbl-item {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    border-bottom: 1px solid #c9c9c9;
}

.renew_modal-tbl__dt,
.renew_modal-tbl__dd {
    padding: 12px 20px;
}

.renew_modal-tbl__dt {
    width: 160px;
    background-color: #eee;
    color: #21348b;
    font-weight: bold;
}

.renew_modal-tbl__dd {
    width: calc(100% - 160px);
}

.renew_modal .mfp-close {
    width: 48px;
    height: 48px;
    background-color: #21348b;
    border-radius: 50%;
    font-size: 35px;
    right: -25px;
    top: -25px;
    transition: 0.5s ease;
    z-index: 2;
    opacity: 1;
    line-height: 1;
}

.renew_modal .mfp-close::before {
    content: '';
    border: 5px solid #fff;
    width: 48px;
    height: 48px;
    position: absolute;
    border-radius: 50%;
    right: -5px;
    top: -5px;
    transition: 0.3s ease;
}

.mfp-close-btn-in .renew_modal .mfp-close {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .renew_modal .mfp-close:hover {
        transform: scale(1.2);
    }

    .renew_modal .mfp-close:hover::before {
        opacity: 0;
    }
}

/*============================ #お問い合わせ ============================*/
.contactbox {
    width: 100%;
    background-color: #eeeff0;
    padding: 0 0 60px;
}

.contactbox-in {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #21348b;
    padding: 45px 0 50px;
}

@media screen and (min-width: 768px) {
    .contactbox-in {
        max-width: 1300px;
        min-width: 1000px;
        width: calc(100% - 180px);
    }

    #wrapper.touch .contactbox-in {
        width: calc(100% - 100px);
    }
}

.contactbox-in::before {
    content: '';
    width: 150px;
    height: 50px;
    background: url(http://www.ctechcorp.co.jp/img/contact/logo.png) center /100% no-repeat;
    position: absolute;
    top: 30px;
    left: 30px;
}

.contactbox__ttl {
    font-size: 26px;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.3;
    color: #ffea00;
    margin-bottom: 10px;
    font-weight: 600;
}

.contactbox__txt {
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    margin-bottom: 35px;
}

.contactbox-btn-wrp {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contactbox-btn {
    width: 300px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    color: #21348b;
    position: relative;
    padding-left: 25px;
    transition: 0.3s ease;
}

.contactbox-btn::after {
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -1px;
    margin: auto;
    transition: 0.3s ease;
}

.contactbox-btn.tel_link {
    font-size: 26px;
}

.contactbox-btn::before {
    content: '\f0e0';
    height: 1em;
    line-height: 1;
    font-family: fontawesome;
    font-size: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    margin: auto;
}

.contactbox-btn.tel_link::before {
    content: '\f095';
    font-size: 25px;
}

.contactbox-btn:not(:last-child) {
    margin-right: 35px;
}

@media screen and (min-width: 768px) {
    .contactbox-btn:hover {
        background-color: rgba(0, 0, 0, 0.3);
        /*background-color: #ffea00;*/
        /*border: 1px solid #21348b;*/
        color: #fff;
    }

    .contactbox-btn:hover::after {
        width: 95%;
        height: 75%;
        opacity: 1;
    }
}

/*============================ #ページトップ ============================*/
.pagetop {
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 2;
}

.pagetop__link {
    width: 220px;
    height: 50px;
    background-color: #21348b;
    margin-left: auto;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .pagetop:before {
        content: '';
        width: 100%;
        height: 20px;
        position: absolute;
        z-index: 1;
        background-color: #333;
    }

    .pagetop__link {
        position: absolute;
        right: 0;
        z-index: 2;
    }
}

.pagetop-in {
    position: relative;
}

.pagetop-in::before {
    content: '\f062';
    font-family: fontawesome;
    font-weight: 300;
    position: absolute;
    top: 5px;
    bottom: 0;
    left: -30px;
    margin: auto;
    height: 1em;
    line-height: 1;
    transition: 0.3s ease;
}

@media screen and (min-width: 768px) {
    .pagetop__link:hover .pagetop-in::before {
        top: -5px;
    }
}

/*============================ #footer ============================*/
#footer {
    width: 100%;
    position: relative;
    z-index: 2;
}

.footer-in {
    padding: 50px 0 100px;
    /*background: url(http://www.ctechcorp.co.jp/img/footer/bg_01.png) center bottom /650px 179px repeat-x;*/
}

.fnav {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.fnav-item {
    width: 25%;
}

.fnav__link {
    display: inline-block;
}

.fnav-item__ttl {
    font-size: 13px;
    line-height: 1.2;
    font-weight: bold;
    /*color: #21348b;*/
    color: white;
}

.fnav-item__ttl:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    #footer {
        padding-bottom: 50px;
    }

    #footer::after {
        content: '';
        width: 100%;
        height: 30%;
        position: absolute;
        background-color: #fff;
        z-index: 1;
        bottom: 0;
    }

    .fnav-item:nth-child(1) .fnav-item__ttl:not(:last-child) {
        margin-bottom: 15px;
    }

    .fnav__link:hover {
        text-decoration: underline;
    }

    .footer-in {
        margin-bottom: -20px;
        position: relative;
        z-index: 2;
    }

    .footer-btm {
        position: relative;
        z-index: 2;
    }
}

.fnav-item__txt {
    font-size: 12px;
    line-height: 2;
    color: white;
}

/* ---------------------- option ---- */
.footer_logo {
    width: 230px;
    height: 60px;
    background: url(http://www.ctechcorp.co.jp/img/footer/logo.png) center /100% no-repeat;
    display: inline-block;
    /*margin-bottom: 10px;*/
}

.footer-btm-list {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.footer-btm-item:not(:last-child) {
    margin-right: 15px;
}

.footer-btm__link {
}

.copyright {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

@media screen and (min-width: 768px) {
    canvas {
        display: block;
        vertical-align: bottom;
    }

    /* ---- particles.js container ---- */
    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eeeeee;
        background-image: url('');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
}

@media screen and (max-width: 767px) {
    /* ---------------------------------------------------------------- SP Style ---- */
    html,
    body {
        font-size: 12px;
        line-height: 1.8;
    }

    .pagefixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .canv-wrap canvas,
    .canv-wrap {
        display: none;
    }

    /* ---------------------------------------------------------------- header ---- */
    #header {
        position: fixed;
    }

    .header-top {
        display: none;
    }

    .header-main {
        height: auto;
        border-bottom: none;
    }

    .header-main-in {
        display: flex;
        min-width: 100%;
        height: 50px;
    }

    .header__link::before,
    .header__link::after,
    .header__link {
        width: 85px;
        height: 44px;
    }

    .header-logo {
        padding: 15px;
    }

    /* ---------------------- option ---- */
    .header-btn-wrp {
        height: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        transition: 0.3s ease;
        z-index: 9999;
    }

    .header-btn-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-btn-item {
        width: 50px;
        height: 50px;
    }

    .header-btn-item .header-top-search {
        width: 100%;
    }

    .header-btn__contact {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
        font-size: 17px;
        line-height: 1;
    }

    /*============================ #メニューボタン ============================*/
    .menu-btn {
        width: 50px;
        height: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-open span,
    .btn-close span {
        width: 19px;
        height: 2px;
        margin: 2px;
    }

    .btn-menu-txt {
        font-size: 10px;
        margin-top: 3px;
        transform: scale(0.7);
    }

    .btn-close span:nth-of-type(3),
    .hscr .btn-click.btn-close span:nth-of-type(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /*============================ #ヘッダーナビゲーション ============================*/
    .hnav {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in;
        position: fixed;
        top: 50px;
        left: 0;
        background-color: #000000a1;
        padding: 20px 15px 70px;
        overflow-y: scroll;
        height: 100%;
    }

    .navopen .hnav {
        visibility: visible;
        opacity: 1;
    }

    .hnav-item {
        width: 100%;
        margin-bottom: 5px;
    }

    .hnav__link {
        /*justify-content: flex-start;*/
        /*width: 100%;*/
        /*background-color: #fff;*/
        /*color: #1a1a1a;*/
        /*height: 50px;*/
        /*display: flex;*/
        /*font-size: 14px;*/
        /*padding: 0 20px;*/

        justify-content: flex-start;
        width: 100%;
        color: #1a1a1a;
        height: 50px;
        display: flex;
        font-size: 14px;
        padding: 0 20px;
        color: white;
    }

    .sub-nav-item__ttl .sub-nav-item__link::after,
    .sub-nav .linkbtn::after,
    .hnav__link::after {
        content: '\f054';
        font-family: fontawesome;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 15px;
        margin: auto;
        color: #21348b;
        font-size: 15px;
        height: 1em;
        line-height: 1;
    }

    .hnav__sub .hnav__link::before,
    .hnav__sub .hnav__link::after {
        content: '';
        width: 15px;
        height: 3px;
        background-color: #f49a03;
        transition: 0.6s ease;
    }

    .hnav__sub .hnav__link::before {
        position: absolute;
        transform: rotate(90deg);
        top: 0;
        bottom: 0;
        right: 15px;
        margin: auto;
    }

    .hnav__sub .hnav-item--opened.hnav__link::before {
        transform: rotate(180deg);
    }

    .hnav-sublist {
        background-color: #fff;
        color: #1a1a1a;
        padding: 0 15px 25px;
        display: none;
    }

    .sub-nav-img {
        display: none;
    }

    .sub-nav .linkbtn {
        width: 100%;
        font-size: 14px;
        margin: 0 auto;
        background-color: #21348b;
        justify-content: flex-start;
        padding: 0 15px 0;
        letter-spacing: 0.1em;
        max-width: none;
        height: 50px;
        margin-bottom: 10px;
        color: #fff;
    }

    .sub-nav .linkbtn::after {
        color: #fff;
    }

    .sub-nav-item__link {
        padding: 5px 0;
        display: block;
        width: 100%;
    }

    .sub-nav-hdnbox {
        padding: 10px 0 15px;
    }

    .sub-nav-item__ttl {
        background-color: #eeeeee;
        font-size: 13px;
    }

    .sub-nav-item__ttl .sub-nav-item__link {
        padding: 12px 15px;
        position: relative;
    }

    .sub-nav-item__ttl .sub-nav-item__link::after {
        color: #21348b;
    }

    .sub-nav-item__txt {
        font-size: 13px;
        line-height: 1.2;
        padding-left: 35px;
        position: relative;
    }

    .sub-nav-item__txt:not(:last-child) {
        margin-bottom: 5px;
    }

    .sub-nav-item__txt::before {
        content: '';
        width: 10px;
        height: 3px;
        background-color: #21348b;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 15px;
        margin: auto;
    }

    .sub-nav-item__txt .pdf-link::after {
        content: '\f1c1';
        font-family: fontawesome;
        position: relative;
        display: inline-block;
        margin-left: 5px;
        color: #f00;
    }

    /* ---------------------- option ---- */
    [class*='hnav-item-sp--'] .hnav__link {
        background-color: #323f7a;
        color: #fff;
        height: 50px;
        border-radius: 30px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    [class*='hnav-item-sp--'] .hnav__link::after {
        color: #fff;
    }

    .hnav-item-sp--recruit {
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .hnav-item-sp--contact {
        margin-top: 25px;
    }

    [class*='hnav-item-sp--'] .hnav__link::before {
        content: '';
        font-family: fontawesome;
        position: relative;
        margin-right: 15px;
        line-height: 1em;
        height: 1em;
        font-size: 20px;
    }

    .hnav-item-sp--recruit .hnav__link::before {
        content: '\f0c0';
    }

    .hnav-item-sp--contact .hnav__link::before {
        content: '\f0e0';
    }

    /* ---------------------- 会社情報 ---- */
    .sub-nav-item__img {
        display: none;
    }

    .hnav-sublist--02 .sub-nav-item__link {
        padding: 12px 15px;
        display: block;
        width: 100%;
        background-color: #eeeeee;
    }

    .hnav-sublist--02 .sub-nav-item:not(:last-child) {
        margin-bottom: 10px;
    }

    /* ---------------------- スクロール時/メニュー開いた時の ---- */
    .hscr .header-main-in {
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(85, 85, 85, 0.08);
    }

    .menu--active .header-main-in {
        background-color: #000000a1;
        box-shadow: none;
        /*border-bottom: 1px solid rgba(255,255,255,.3);*/
    }

    .menu--active .header-logo,
    .hscr .header-logo {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .menu--active .header-logo {
        z-index: 999;
        /*background-color: #1b296b;*/
    }

    .menu--active .header-logo {
        z-index: 999;
        /*background-color: #1b296b;*/
    }

    .menu--active .header__link::before,
    .menu--active .header__link::after,
    .menu--active .header__link,
    .hscr .header__link::before,
    .hscr .header__link::after,
    .hscr .header__link {
        width: 70px;
        height: 34px;
    }

    /*.menu--active .menu-btn,
	.menu--active .header-btn-wrp,
	.hscr .menu-btn,
	.hscr .header-btn-wrp {
		background-color: #fff;
	}*/
    .hscr .header-btn-item .header-top-search .fa,
    .hscr .header-btn__contact {
        color: #21348b;
    }

    .menu--active .header-btn-item .header-top-search .fa,
    .menu--active .header-btn__contact,
    .menu--active .btn-menu-txt {
        color: #fff;
    }

    .menu--active .menu-btn,
    .hscr .menu-btn {
        border-left: 1px solid rgba(180, 180, 180, .5);
    }

    .menu--active .menu-btn {
        border-bottom: none;
    }

    .menu--active .header-btn-item .header-top-search,
    .hscr .header-btn-item .header-top-search {
        border-left: 1px solid rgba(180, 180, 180, .5);
        border-right: 1px solid rgba(180, 180, 180, .5);
    }

    .menu--active .header-btn-wrp {
        border-bottom: none;
    }

    /*.menu--active .btn-open span,
	.menu--active .btn-close span {
		background-color: #21348b;
	}*/
    .btn-close span:nth-of-type(1),
    .hscr .btn-click.btn-close span:nth-of-type(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    /*============================ #検索 ============================*/
    .header-search {
        width: 100%;
        top: 50px;
    }

    .header-search .gsc-results-wrapper-overlay {
        width: calc(100% - 40px);
        height: 90%;
        left: 0;
        right: 0;
    }

    /*============================ #main ============================*/
    #main {
        margin-top: 0px;
    }

    .breadcrumb {
        display: none;
    }

    /*============================ #見出し ============================*/
    .block__ttl {
        font-size: 20px;
    }

    /* ---------------------- option ---- */
    .block__ttl--m {
        font-size: 18px;
        line-height: 1.8;
        font-weight: 600;
    }

    /* ---------------------- option ---- */
    .block__ttl02 {
        font-size: 18px;
        margin: 13px 0 20px;
    }

    .block__ttl02-sub {
        font-size: 10px;
        margin: 10px 0 0;
    }

    /* ---------------------- option ---- */
    .block__ttl03 {
        font-size: 15px;
        line-height: 1.5;
        padding: 10px 15px 10px 30px;
        margin-bottom: 13px;
    }

    .block__ttl03::before {
        width: 18px;
        height: 7px;
    }

    /* ---------------------- option ---- */
    .block__ttl04 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .block__ttl04::before {
        width: 15px;
        margin-right: 8px;
    }

    /* ---------------------- option ---- */
    .block__ttl05 {
        font-size: 15px;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .block__ttl05::after {
        width: 30px;
        height: 2px;
    }

    /* ---------------------- option ---- */
    .block__ttl06 {
        font-size: 14px;
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    /*============================ #ボタン ============================*/
    .btn-wrp {
        display: block;
    }

    .linkbtn {
        max-width: 285px;
        width: 90%;
        font-size: 15px;
        margin: 0 auto;
        /*background-color: rgba(0, 0, 0, 0.1);*/
    }

    .linkbtn:not(:last-child) {
        margin: 0 auto 15px;
    }

    .linkbtn::before {
        border: 1px solid rgba(255, 255, 255, 1);
    }

    /*============================ #header ============================*/
    .linkbtn02 {
        font-size: 13px;
        padding: 12px 50px 12px 20px;
    }

    .linkbtn02::after {
        width: 35px;
        height: 35px;
        right: 2px;
    }

    /* ---------------------- option ---- */
    .linkbtn02--arw::before {
        right: 11px;
        font-size: 15px;
    }

    .linkbtn02--pdf::before {
        right: 13px;
    }

    /*============================ #メインのスライダー ============================*/
    .pmain-in {
        font-weight: 600;
    }

    .pmain-slide {
        height: 350px;
        overflow: hidden;
    }

    .pmain__sub {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .pmain-ttl {
        font-size: 22px;
        letter-spacing: 0.1em;
    }

    .pmain-ttl__sub {
        font-size: 12px;
        margin: 10px 0 30px;
    }

    .pmain-txt {
        font-size: 13px;
        line-height: 1.8;
        margin-top: 15px;
    }

    /* ---------------------- option ---- */
    .pmain-bgimg {
        height: 60vw;
    }

    .pmain-bgimg .pmain-in {
        padding-top: calc(3vw + 40px);
    }

    .pmain-bline::after {
        width: 1px;
        height: 50px;
        bottom: -25px;
    }

    /*============================ #header ============================*/
    .biz-box {
        padding: 0;
    }

    .biz-box-in {
        padding: 40px 20px;
        box-shadow: none;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .plocalbox-wrp .biz-box-in {
        background-color: #eeeff0;
    }

    .biz-box-in::before {
        width: 140px;
        height: 46px;
        top: 20px;
        left: 15px;
    }

    .biz-box__leadtxt {
        font-size: 13px;
        letter-spacing: 0;
        line-height: 1.8;
        text-align: left;
        margin-bottom: 30px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .biz-box-nav {
        width: 100%;
        display: block;
        margin-bottom: 30px;
    }

    [class*='biz-box-item--'] {
        width: 100%;
        border-left: none;
        border-bottom: none;
    }

    .localnav-wrp [class*='biz-box-item--'] {
        margin-bottom: 15px;
    }

    [class*='biz-box-item--']:not(:last-child) {
        margin-bottom: 15px;
    }

    .biz-box__img {
        width: 100%;
        height: 45vw;
    }

    .biz-box-cnt {
        padding: 15px 0 20px;
    }

    .biz-box__txt {
        font-size: 13px;
    }

    /* ---------------------- option ---- */
    .biz-box--lead .biz-box-in {
        top: 0;
        margin-bottom: 0;
        padding: 40px 20px;
    }

    /*============================ #第三下層/コンテンツは部分 ============================*/
    .biz-box-entry {
        padding: 0;
    }

    .biz-box-entry__lead {
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    .biz-example-item:not(:last-child) {
        margin-bottom: 15px;
    }

    .biz-example__ico {
        padding: 6px 14px;
        font-size: 12px;
    }

    .biz-example-in {
        display: block;
        padding: 40px 20px 20px;
    }

    .biz-example-img {
        width: 100%;
    }

    .biz-example__ttl {
        font-size: 15px;
        line-height: 1.6;
    }

    .biz-example-txt {
        width: 100%;
        padding: 10px 0;
    }

    .biz-example__txt {
        font-size: 13px;
        line-height: 1.8;
    }

    /*============================ #コンテンツナビゲーション ============================*/
    .cntnav-wrp {
        background-color: #eeeff0;
    }

    .cntnav-in {
        display: block;
        max-width: 100%;
        min-width: auto;
        /*transform: translateY(-35px);*/
        width: calc((100% - 40px));
        padding-bottom: 10px;
    }

    [class*='cntnav-item--'] {
        width: 100%;
        box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
    }

    [class*='cntnav-item--']:not(:last-child) {
        margin-bottom: 20px;
    }

    .cntnav-img {
        height: 43vw;
    }

    .cntnav-box {
        padding: 20px 25px 15px;
    }

    .cntnav__ttl {
        font-size: 15px;
        border-bottom: 1px solid #c9c9c9;
        margin-bottom: 10px;
    }

    .cntnav__ttl::before {
        margin-right: 5px;
    }

    .cntnav-list {
        font-size: 13px;
    }

    .cntnav-item {
        margin-bottom: 5px;
    }

    .cntnav-item::before {
        width: 8px;
        height: 2px;
    }

    /* ---------------------- option ---- */
    .cntnav-wrp .cntnav-in {
        transform: translateY(-35px);
    }

    /*============================ #全幅画像リスト ============================*/
    .bgblock__box {
        height: auto;
    }

    .bgblock__box-in {
        display: block;
        height: auto;
        padding: 50px 20px;
    }

    .bgblock__box-subttl {
        max-width: 285px;
        width: 90%;
        border-radius: 20px;
        height: auto;
        min-height: 40px;
        font-size: 15px;
        margin: 0 auto 20px;
        padding: 10px 15px;
        line-height: 1.3;
    }

    .bgblock__box-in .block__ttl {
        margin-bottom: 20px;
        text-align: center;
        font-weight: 600;
    }

    .bgblock__box-txt {
        font-size: 13px;
        line-height: 1.8;
        width: 100%;
        margin-bottom: 35px;
    }

    /* ---------------------- option ---- */
    .bgblock__box-inline {
        display: block;
        width: 100%;
    }

    .bgblock__box-img {
        width: 250px;
        margin: 0 auto 20px;
    }

    /* ---------------------- option ---- */
    .bgblock__box-ico {
        width: 100px;
        margin: 0 auto 25px;
    }

    /* ---------------------- 青い三角の幾何学模様のパターン ---- */
    .bgrole-wrp {
        margin-bottom: 0;
    }

    .bgrole-wrp--bltri {
    }

    .bgrole-wrp--bltri .bgblock__box::before {
        background-attachment: scroll;
    }

    /*============================ #テーブル ============================*/
    .block__tbl {
        font-size: 12px;
        line-height: 1.4;
        border-right: 3px solid #21348b;
    }

    .block__tbl-item {
    }

    .block__tbl-ttl,
    .block__tbl-txt {
        padding: 7px 10px;
    }

    /* ---------------------- 左が短くて右が長い ---- */
    .block__tbl--long {
        /*border-right: none;*/
    }

    .block__tbl-item {
        /*border-bottom: none;*/
    }

    .block__tbl--long .block__tbl-ttl,
    .block__tbl--long .block__tbl-txt {
        /*width: 100%;
		display: block;*/
    }

    .block__tbl--long .block__tbl-ttl {
        width: 95px;
    }

    /*============================ #localnav ============================*/
    .localnav-wrp {
        background-color: #eee;
        padding-bottom: 40px;
    }

    .localnav-wrp .cntnav {
        padding: 40px 0 20px;
        border-top: 2px solid #21348b;
    }

    .localnav__txt {
        font-size: 12px;
        line-height: 1.8;
    }

    /* ---------------------- option ---- */
    .localnav-wrp {
        margin-bottom: 0;
    }

    .localnav-wrp--corp {
        margin-bottom: 0px;
        background-color: #eeeff0;
        padding-bottom: 40px;
    }

    /*	.localnav-wrp--corp .cntnav {
		padding: 0 0 40px;
	}*/
    /* ---------------------- option ---- */
    .plocalbox-wrp .biz-box-nav {
        display: flex;
        margin-bottom: 10px;
    }

    .plocalbox-wrp [class*='biz-box-item--'] {
        width: calc((100% - 5px) / 2);
        background-color: #fff;
    }

    .plocalbox-wrp [class*='biz-box-item--']:nth-child(2n + 1) {
        margin-right: 5px;
    }

    .plocalbox-wrp .biz-box__img {
        height: 100px;
    }

    .plocalbox-wrp .biz-box-cnt {
        padding: 9px 10px;
    }

    .plocalbox-wrp .cntnav__ttl {
        font-size: 12px;
    }

    /*============================ #header ============================*/
    .news-list {
        max-width: 100%;
        width: 100%;
        margin: 0 auto 25px;
    }

    .news-item__link {
        display: block;
    }

    .news-item__days {
        font-size: 12px;
        width: auto;
        display: inline-block;
    }

    [class*='news-item__cat--'] {
        width: 90px;
        height: 15px;
        font-size: 10px;
        line-height: 15px;
        margin: 0 5px;
        display: inline-block;
    }

    .news-item__ttl {
        width: 100%;
        font-size: 12px;
        margin-top: 5px;
    }

    /*============================ #数字付きリスト ============================*/
    .num-list {
        width: 100%;
        margin-bottom: 20px;
        padding: 0;
    }

    .num-list--gray {
        padding: 20px 15px;
    }

    .num-item:not(:last-child) {
        margin-bottom: 25px;
    }

    .num-item__num {
        width: 18px;
        height: 18px;
        font-size: 10px;
        margin-right: 10px;
    }

    .num-item__ttl {
        font-size: 13px;
    }

    .num-item__txt {
        font-size: 12px;
        line-height: 1.6;
        padding-left: 29px;
    }

    /* ---------------------- option ---- */
    /*============================ #techinfo ============================*/
    .techinfo-list {
        width: 100%;
        display: block;
        margin: 0 auto 25px;
    }

    .plocalbox-wrp .techinfo-list [class*='biz-box-item--'],
    [class*='techinfo-item--'] {
        width: 100%;
        margin-bottom: 10px;
        display: block;
    }

    .techinfo-item-img {
        width: 90px;
        /*height: auto;*/
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
    }

    .techinfo-item-txt {
        width: calc(100% - 90px);
        padding: 15px 35px 15px 10px;
        margin-left: auto;
    }

    .techinfo-item-txt::after {
        right: 15px;
        font-size: 20px;
    }

    .techinfo__ttl {
        font-size: 12px;
        line-height: 1.5;
    }

    .techinfo__txt {
        font-size: 10px;
        line-height: 1.4;
    }

    [class*='techinfo-ico-item--'] {
        height: 18px;
        border-radius: 9px;
        line-height: 18px;
        font-size: 10px;
        padding: 0 8px;
        margin-bottom: 5px;
        letter-spacing: 0;
    }

    /*============================ #pickup ============================*/
    .pickup {
        padding: 0px 0 0px;
    }

    .pickup-slider {
        width: 100%;
    }

    [class*='pickup-item'] {
        width: 215px;
        height: auto;
        min-height: 250px;
        margin: 12px;
    }

    .pickup-img {
        height: 120px;
    }

    .pickup-in {
        padding: 12px 15px;
    }

    .pickup__ttl {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .pickup-cat {
        font-size: 10px;
        padding: 3px 10px;
    }

    .pickup-txt {
        font-size: 12px;
    }

    /* ---------------------- option ---- */
    .pickup .slick-arrow {
        font-size: 17px;
    }

    .pickup .slick-prev {
        left: -25px;
        padding-left: 15px;
    }

    .pickup .slick-next {
        right: -25px;
        padding-right: 15px;
    }

    /*============================ #再生エネルギー/モーダル ============================*/
    .renew_modal {
        width: calc(100% - 10px);
    }

    .renew_modal-in {
        display: block;
    }

    .renew_modal-img {
        width: 100%;
        height: 200px;
    }

    .renew_modal-img span {
        right: 15px;
        bottom: 15px;
        font-size: 13px;
    }

    .renew_modal-txt {
        width: 100%;
        padding: 15px;
    }

    [class*='renew_modal__ico--'] {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }

    .renew_modal__ttl-in {
        width: calc(100% - 30px);
    }

    .renew_modal__ttl {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .renew_modal-tbl-item {
        font-size: 12px;
    }

    .renew_modal-tbl__dt,
    .renew_modal-tbl__dd {
        padding: 7px 10px;
    }

    .renew_modal-tbl__dt {
        width: 110px;
    }

    .renew_modal-tbl__dd {
        width: calc(100% - 110px);
    }

    /* ---------------------- option ---- */
    .renew_modal .mfp-close {
        width: 40px;
        height: 40px;
        font-size: 32px;
        right: -12px;
        top: -12px;
    }

    .renew_modal .mfp-close::before {
        border: 3px solid #fff;
        width: 38px;
        height: 38px;
        right: -3px;
        top: -3px;
    }

    /*============================ #お問い合わせ ============================*/
    .contactbox {
        padding: 30px 20px;
    }

    .contactbox-in {
        width: 100%;
        padding: 30px 0 25px;
    }

    .contactbox-in::before {
        width: 140px;
        height: 46px;
        top: 20px;
        left: 15px;
    }

    .contactbox__ttl {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .contactbox__txt {
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 25px;
        padding: 0 10px;
    }

    .contactbox-btn-wrp {
        display: block;
    }

    .contactbox-btn {
        width: calc(100% - 40px);
        max-width: 285px;
        font-size: 18px;
        padding-left: 35px;
        transition: 0.3s ease;
        margin: auto;
    }

    .contactbox-btn:not(:last-child) {
        margin-right: auto;
        margin-bottom: 10px;
    }

    .contactbox-btn.tel_link {
        font-size: 24px;
    }

    /* ---------------------- option ---- */
    .contactbox-btn::before {
        font-size: 22px;
        left: 20px;
    }

    .contactbox-btn.tel_link::before {
        font-size: 26px;
        left: 20px;
    }

    /*============================ #ページトップ ============================*/
    .pagetop__link {
        width: 100%;
        margin: auto;
        background-color: #333333;
        font-size: 13px;
    }

    .pagetop-in::before {
        top: 1px;
    }

    /*============================ #footer ============================*/
    .footer-in {
        padding: 25px 20px 80px;
        /*background-color: #eee;*/
        background-color: #f4f4f4;
    }

    .fnav {
        margin-bottom: 30px;
    }

    .fnav-item {
        width: 50%;
        margin-bottom: 20px;
    }

    .fnav-item__ttl:not(:last-child) {
        margin-bottom: 10px;
    }

    /*.footer_logo {
		margin: auto;
	}*/
    /* ---------------------- option ---- */
    .footer_logo {
        width: 200px;
        height: 55px;
        margin-bottom: 10px;
    }

    .footer-btm-list {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .copyright {
        font-size: 10px;
        padding-bottom: 15px;
    }
}


.colorWhite {
    color: white;
}

.fs20 {
    font-size: 20px;
}


.textThrouth{
    text-decoration: line-through;
}